<template>
  <div class="flow-design-wrap">
    <header style="height: 52px" class="button-control">
      <Toolbar
        @childByValue="childByValue"
        :selectItem="selectItem"
        :nodeModel="nodeModel"
        :edgeModel="edgeModel"
        :flowData="flowData.flowInfo"
      ></Toolbar>
    </header>
    <div class="panel">
      <aside class="panel-left" :style="`min-width:${leftWidth}`">
        <LeftPanel />
      </aside>
      <div class="panel-canvas-wrap">
        <CanvasPanel :data="flowData.g6data" />
        <vxe-modal
          resize
          width="700"
          title="步骤设置"
          v-model="stepSettingVisible"
        >
          <template v-slot>
            <StepSetting>
              <!-- --------------------线条------------------------- -->
              <template v-slot:edge>
                <div class="">
                  <a-tabs type="card">
                    <a-tab-pane key="1" tab="基本">
                      <div style="overflow: hidden">
                        <div style="float: left; line-height: 30px">
                          sql条件:
                        </div>
                        <div style="float: right">
                          <a-button @click="testSQL">测试sql</a-button>
                        </div>
                      </div>
                      <div style="margin-top: 10px">
                        <a-textarea
                          placeholder="请输入sql语句"
                          :rows="4"
                          v-model="edgeModel.sql"
                        />
                      </div>
                      <div class="mt-1" style="line-height: 30px">
                        连线标签:
                      </div>
                      <div class="mt-1">
                        <a-input
                          placeholder="请输入连线标签"
                          v-model="edgeModel.label"
                        ></a-input>
                      </div>
                      <!-- <a-form style="padding: 0px 15px" :model="edgeModel">
                        <a-form-item label="sql条件">
                          <a-textarea :rows="3" v-model:value="edgeModel.sql" />
                        </a-form-item>
                        <a-form-item algin>
                          <div style="text-align: right">
                            <a-button @click="testSQL" >
                              测试sql
                            </a-button>
                          </div>
                        </a-form-item>
                        <a-form-item label="连线标签">
                          <a-input v-model:value="edgeModel.label"></a-input>
                        </a-form-item>
                      </a-form> -->
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="组织">
                      <a-button @click="insertEvent()">
                        <template #icon><PlusSquareOutlined /></template>
                        新增
                      </a-button>
                      <div
                        class="mt-1"
                        v-for="(item, index) in edgeModel.organizeData"
                        :key="index"
                      >
                        <a-select v-model:value="item.left">
                          <a-select-option value="">空</a-select-option>
                          <a-select-option value="(">(</a-select-option>
                        </a-select>
                        <a-select v-model:value="item.fieldType">
                          <a-select-option value="">空</a-select-option>
                          <a-select-option value="0">发送者</a-select-option>
                          <a-select-option value="1">发起者</a-select-option>
                        </a-select>
                        <a-select v-model:value="item.equal">
                          <a-select-option value="0">属于</a-select-option>
                          <a-select-option value="1">属于</a-select-option>
                        </a-select>
                        <a-select
                          style="width: 120px"
                          v-model:value="item.value"
                        >
                          <a-select-option value="0">
                            选择组织或机构
                          </a-select-option>
                          <a-select-option value="1">部门领导</a-select-option>
                          <a-select-option value="2">
                            部门分管领导
                          </a-select-option>
                        </a-select>
                        <OrganizeSelect
                          style="position: relative; top: 2px"
                          v-if="item.value == 0"
                          :initialData="item.organizeId"
                          :width="'200'"
                          @childByValue="edgeRes"
                        ></OrganizeSelect>

                        <a-select v-model:value="item.right">
                          <a-select-option value="">空</a-select-option>
                          <a-select-option value=")">)</a-select-option>
                        </a-select>
                        <a-select v-model:value="item.andor">
                          <a-select-option value="">空</a-select-option>
                          <a-select-option value="and">and</a-select-option>
                          <a-select-option value="or">or</a-select-option>
                        </a-select>
                        <a-tooltip class="ml-1" effect="dark" title="删除 ">
                          <a-button
                            @click="removeEvent(index)"
                            icon="delete"
                            shape="circle"
                          />
                        </a-tooltip>
                      </div>
                    </a-tab-pane>
                  </a-tabs>
                  <div class="mt-1" style="text-align: center">
                    <a-button @click="updateedge" type="primary">确定</a-button>
                    <a-button @click="stepSettingVisible = false" class="ml-2">
                      取消
                    </a-button>
                  </div>
                </div>
              </template>
              <!-- --------------------步骤------------------------- -->
              <template v-slot:node>
                <a-tabs type="card">
                  <a-tab-pane key="1" tab="基本">
                    <a-form
                      :labelCol="{ span: 4 }"
                      :wrapperCol="{ span: 14 }"
                      :model="nodeModel"
                    >
                      <!-- <a-form-item label="步骤ID">
                        <a-input disabled="" v-model:value="nodeModel.id"></a-input>
                      </a-form-item> -->
                      <a-form-item required label="步骤名称">
                        <a-input v-model:value="nodeModel.label"></a-input>
                      </a-form-item>
                      <a-form-item required label="选择表单">
                        <a-select
                          placeholder="请选择"
                          v-model:value="nodeModel.forms"
                        >
                          <a-select-option
                            v-for="item in tableData"
                            :key="item.id"
                            :value="item.id"
                          >
                            {{ item.title }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                      <a-form-item label="说明">
                        <a-textarea
                          type="textarea"
                          placeholder="请输入备注"
                          v-model:value="nodeModel.note"
                        />
                      </a-form-item>
                    </a-form>
                    <a-divider></a-divider>
                  </a-tab-pane>
                  <a-tab-pane key="4" tab="策略">
                    <vxe-form>
                      <vxe-form-item title="处理者类型：">
                        <template v-slot>
                          <a-select
                            v-model:value="nodeModel.strategy.processorType"
                            style="width: 200px"
                          >
                            <a-select-option value="0">
                              所有成员
                            </a-select-option>
                            <a-select-option value="1">部门</a-select-option>
                            <a-select-option value="2">岗位</a-select-option>
                            <a-select-option value="3">角色组</a-select-option>
                            <a-select-option value="4">人员</a-select-option>
                            <a-select-option value="5">发起者</a-select-option>
                            <a-select-option value="7">
                              某一步骤处理者
                            </a-select-option>
                            <a-select-option value="8">字段值</a-select-option>
                            <a-select-option value="9">
                              发起者部门领导
                            </a-select-option>
                            <a-select-option value="10">
                              发起者分管领导
                            </a-select-option>
                            <a-select-option value="13">
                              发起者上级部门领导
                            </a-select-option>
                            <a-select-option value="17">
                              发起者所有上级部门领导
                            </a-select-option>
                            <a-select-option value="16">
                              发起者部门所有成员
                            </a-select-option>
                            <a-select-option value="11">
                              前一步处理者部门领导
                            </a-select-option>
                            <a-select-option value="12">
                              前一步处理者分管领导
                            </a-select-option>
                            <a-select-option value="14">
                              前一步处理者上级部门领导
                            </a-select-option>
                            <a-select-option value="18">
                              前一步处理者所有上级部门领导
                            </a-select-option>
                            <a-select-option value="15">
                              前一步处理者部门所有成员
                            </a-select-option>
                          </a-select>
                        </template>
                      </vxe-form-item>
                      <vxe-form-item title="默认处理者：">
                        <template v-slot>
                          <OrganizeSelect
                            :initialData="nodeModel.strategy.defaultHandlerIds"
                            @childByValue="nodeRes"
                          ></OrganizeSelect>
                          <a-input
                            v-model:value="nodeModel.strategy.defaultHandlerIds"
                            style="display: none"
                          ></a-input>
                        </template>
                      </vxe-form-item>
                    </vxe-form>
                    <a-divider></a-divider>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="按钮">
                    <div class="ml-3 mt-1">
                      <a-transfer
                        :key="timerKey"
                        :data-source="mockData"
                        :titles="['流程按钮', '已选']"
                        :target-keys="nodeModel.targetKeys"
                        :selected-keys="selectedKeys"
                        :render="(item) => item.title"
                        @change="handleChange"
                        @selectChange="handleSelectChange"
                      />
                    </div>
                    <a-divider></a-divider>
                  </a-tab-pane>
                  <a-tab-pane key="3" tab="数据">
                    <!-- <a-button @click="gettabledata"  >获取数据</a-button> -->

                    <vxe-table
                      class="mb-1"
                      height="400"
                      ref="dataState"
                      :data="nodeModel.sourceData"
                      :edit-config="{ trigger: 'click', mode: 'cell' }"
                    >
                      <vxe-table-column
                        type="seq"
                        width="60"
                      ></vxe-table-column>
                      <vxe-table-column
                        field="tableName"
                        title="表名称"
                      ></vxe-table-column>
                      <vxe-table-column
                        field="filedName"
                        title="字段名称"
                      ></vxe-table-column>
                      <vxe-table-column
                        field="note"
                        title="说明"
                      ></vxe-table-column>
                      <vxe-table-column
                        field="type"
                        title="字段状态"
                        :edit-render="{
                          name: '$select',
                          options: filedStateList,
                        }"
                      ></vxe-table-column>
                    </vxe-table>
                  </a-tab-pane>
                </a-tabs>

                <div style="text-align: center">
                  <a-button @click="updatenode" type="primary">确定</a-button>
                  <a-button @click="stepSettingVisible = false" class="ml-2">
                    取消
                  </a-button>
                </div>
              </template>
            </StepSetting>
          </template>
        </vxe-modal>
      </div>
    </div>
  </div>
</template>

<script>
  import CanvasPanel from './canvasPanel'
  import LeftPanel from './leftPanel'
  import StepSetting from './modelSetting/stepSetting' //步骤配置
  import Toolbar from './toolbar'
  import { Gets } from '@/api/form/api'
  import { GetDictByPid } from '@/api/dictionary/api'
  import { Getfileds } from '@/api/databaselink/api'
  import { Testsql } from '@/api/flow/api'
  import OrganizeSelect from '@/mycomponents/organize/organizeSelect'
  import { PlusSquareOutlined } from '@ant-design/icons-vue'
  export default {
    name: 'FlowDesignTCD',
    provide() {
      return {
        FlowDT: this,
      }
    },
    components: {
      CanvasPanel,
      LeftPanel,
      StepSetting,
      Toolbar,
      OrganizeSelect,
      PlusSquareOutlined,
    },
    props: {
      leftWidth: {
        type: String,
        default: '130px',
      },
      //流程初始数据
      flowData: {
        type: Object,
        default: () => ({}),
      },

      nodeModel: {
        //被选中节点数据
        type: Object,
        default: () => ({}),
      },
      edgeModel: {
        //被选中线条数据
        type: Object,
        default: () => ({}),
      },
    },

    data() {
      return {
        selectOitemIndex: 0,
        // 流程设置数据----------------------
        stepSettingVisible: false,
        filedStateList: [
          // 字段可选状态
          { label: '编辑', value: '0' },
          { label: '只读', value: '1' },
          // { label: '隐藏', value: '2' },
        ],
        sourceData: [], // 控制字段状态的列表
        timerKey: '', // 穿梭框key值
        mockData: [], // 穿梭框初始数据
        selectedKeys: [], // 穿梭框复选框选中的数据
        // ---------------------- 流程设置数据

        selectItem: '', //被选中的节点
        node: {},
        edge: {},
      }
    },
    created() {
      var that = this
      var database = this.flowData.flowInfo.dataBases
      this.links_tables = database
      if (database !== undefined && database.length > 0) {
        this.sourceData = []
        database.forEach((element) => {
          Getfileds({ id: element.linkId, table: element.tableName }).then(
            (res) => {
              if (res.isSuccess) {
                res.content.forEach((child) => {
                  that.sourceData.push({
                    tableName: element.tableName,
                    filedName: child.columnName,
                    note: child.note,
                    type: 0,
                  })
                })
              }
            }
          )
        })
      }
      GetDictByPid({ id: 'c090220d-248c-b640-881c-39fae3cff807' }).then(
        (res) => {
          if (res.isSuccess) {
            this.mockData = []
            res.content.forEach((element) => {
              this.mockData.push({
                key: element.id,
                title: element.name,
              })
            })
          } else {
            console.log('error', res)
            this.$message.error('请求出错了，请刷新重试')
          }
        }
      )
      Gets().then((res) => {
        if (res.isSuccess) {
          that.tableData = res.content.items
        }
      })

      //将添加的新节点的数据格式保存
      this.node = JSON.parse(JSON.stringify(this.nodeModel))
      this.edge = JSON.parse(JSON.stringify(this.edgeModel))
    },
    methods: {
      // 测试sql
      testSQL() {
        console.log(this.links_tables)
        Testsql({
          DbId: this.links_tables[0].linkId,
          TableName: this.links_tables[0].tableName,
          Primarykey: this.links_tables[0].primaryKey,
          Where: this.edgeModel.sql,
        }).then((res) => {
          if (res.isSuccess) {
            this.$message.info(res.content)
          }
        })
      },
      // 线条的组织选择返回事件
      edgeRes(res) {
        this.edgeModel.organizeData[this.selectOitemIndex].organizeName =
          res.resName
        this.edgeModel.organizeData[this.selectOitemIndex].organizeId =
          res.resId
      },

      // 节点默认处理人选择后返回事件
      nodeRes(res) {
        console.log(res)
        this.nodeModel.strategy.defaultHandlerIds = res.resId
        this.nodeModel.strategy.defaultHandlerName = res.resName
      },

      // 新增table表格一行数据
      insertEvent() {
        this.edgeModel.organizeData.push({
          left: '',
          fieldType: '',
          equal: '0',
          value: '0',
          right: '',
          andor: '',
          organizeName: '',
        })
      },
      // 删除table表格一行数据
      removeEvent(index) {
        this.$delete(this.edgeModel.organizeData, index)
      },
      // 节点配置-----------------------
      gettabledata() {
        console.log('sourceData', this.sourceData)
        console.log('nodeModelsourceData', this.nodeModel.sourceData)
        // console.log(this.$refs.dataState.afterFullData)
      },
      // 子组件传递过来的值
      childByValue: function (childValue) {
        var that = this
        this.sourceData = []
        this.links_tables = childValue
        childValue.forEach((element) => {
          Getfileds({ id: element.linkId, table: element.tableName }).then(
            (res) => {
              if (res.isSuccess) {
                res.content.forEach((child) => {
                  that.sourceData.push({
                    tableName: element.tableName,
                    filedName: child.columnName,
                    note: child.note,
                    type: 0,
                  })
                })
              }
            }
          )
        })
      },

      // 穿梭框改变选择数据
      handleChange(nextTargetKeys) {
        this.nodeModel.targetKeys = nextTargetKeys
      },
      // 穿梭框选择复选框
      handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
        this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
      },
      // 修改线条数据
      updateedge() {
        this.$graph.updateItem(this.selectItem, {
          label: this.edgeModel.label,
          data: {
            ...this.edgeModel,
          },
        })
        this.$message.success('步骤修改成功')
        this.stepSettingVisible = false
      },

      // 修改节点数据
      updatenode() {
        var that = this
        this.$graph.updateItem(this.selectItem, {
          label: that.nodeModel.label,
          data: {
            ...that.nodeModel,
          },
        })
        that.$message.success('步骤修改成功')
        that.stepSettingVisible = false
      },
    },
    // -----------------------节点配置
    watch: {
      selectItem: {
        handler(newValue, oldValue) {
          var that = this
          if (newValue !== '') {
            this.$nextTick(() => {
              //当selectItem变化时将selectItem的Model传给父组件
              const newType = newValue.getType()
              const Model = JSON.parse(JSON.stringify(newValue.getModel()))

              if (newType === 'node') {
                //将当前selectItem的Model的data传给父组件
                this.$emit('update:nodeModel', {
                  ...Model.data,
                })
              }
              if (newType === 'edge') {
                this.$emit('update:edgeModel', {
                  ...Model.data,
                })
              }
            })
            //监听selectItem,切换选中的节点样式
            this.$nextTick(() => {
              if (oldValue !== '') {
                const newType = newValue.getType()
                const oldType = oldValue.getType()
                newType === 'node'
                  ? that.$graph.setItemState(newValue, 'node_hover', true)
                  : that.$graph.setItemState(newValue, 'select', true)
                oldType === 'node'
                  ? that.$graph.setItemState(oldValue, 'node_hover', false)
                  : that.$graph.setItemState(oldValue, 'select', false)
              }
            })
          }
        },
      },
    },
  }
</script>

<style></style>
